<template>
	<div class="alert-bind-tips-wrap">
		<div class="bg-cover"></div>
		<div class="alert-bind-tips-content-wrap">
			<div class="alert-bind-tips-header"><slot name="tips">提示</slot><slot name="close"></slot></div>
			<slot name="content"></slot>
			<div class="alert-bind-tips-foot-wrap">
				<slot name="footbtn"></slot>
			</div>
		</div>
	</div>
</template>

<script>
	export default{
		name:"alertFootBtn"
	}
</script>

<style lang="scss" scoped>
	.alert-bind-tips-wrap{
		position: fixed;
		z-index: 1000;
		top:0;
		bottom: 0;
		left: 0;
		right: 0;
		.alert-bind-tips-content-wrap{
			position: absolute;
			left:0;
			right:0;
			top: 50%;
			width: 19.37rem;
			margin: auto;
			padding: 1.87rem 1.5rem;
			background-color: #fff;
			border-radius: 0.25rem;
			transform: translateY(-50%);
			text-align: center;
			font-size: 0.93rem;
			color: #1D1E2C;
			box-sizing: border-box;
			.alert-bind-tips-header{
				margin-bottom: 0.62rem;
				font-size: 1.25rem;
				font-weight: 600;
				.close-icon{
					position: absolute;
					right: 1.43rem;
					top: 14px;
					width: 1.12rem;
					height: 1.12rem;
					background: url(../../assets/images/private-chat-close-icon.png) no-repeat;
					background-size:contain;
				}
			}
			.alert-bind-tips-foot-wrap{
				margin-top: 1.75rem;
				.alert-bind-btn{
					width: 16.37rem;
					height: 2.62rem;
					line-height: 2.62rem;
					background-color: #4360F0;
					font-size: 1rem;
					color: #fff;
					border-radius: 1.31rem;
				}
			}
		}
		.password-input-wrap{
			@include border-4-1px;
			.password-input{
				position: relative;
				width: 100%;
				padding-left: 1.25rem;
				height: 3.12rem;
				line-height: 3.12rem;
				box-sizing: border-box;
				outline:none;
				-webkit-appearance:none;
				/*&:focus{
					border: 1px solid #4360F0;
				}*/
			}
		}
	}
</style>
